<template>
  <div class="home-page">
    <el-container class="container">
      <el-header>
        <div class="title">
          <h1>欢迎使用惊喜一餐！</h1>
        </div>
      </el-header>
      <el-main>
        <el-carousel :interval="4000" type="card" height="300px">
          <!-- 推荐餐厅轮播 -->
          <el-carousel-item v-for="restaurant in recommendedRestaurants" :key="restaurant.id">
            <el-image :src="restaurant.image" fit="cover"></el-image>
            <h3>{{ restaurant.name }}</h3>
          </el-carousel-item>
        </el-carousel>
        <!-- 餐厅列表 -->
        <div class="restaurant-list">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="restaurant in recommendedRestaurants" :key="restaurant.id">
              <el-card class="restaurant-card">
                <el-image :src="restaurant.image" fit="cover" class="restaurant-image"></el-image>
                <div class="restaurant-info">
                  <span>{{ restaurant.name }}</span>
                  <p>{{ restaurant.location }}</p>
                  <div class="bottom clearfix">
                    <el-rate v-model="restaurant.rating" disabled show-score text-color="#ff9900"></el-rate>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>

export default {
  data () {
    return {
      recommendedRestaurants: [
        // 示例数据，实际应用中应从后端获取
        { id: 1, name: '家常菜馆', location: '安师大二食堂三楼10号窗口', image: require('@/img/img_1.png'), rating: 4.7 },
        { id: 2, name: '麻辣香锅', location: '安师大二食堂三楼11号窗口', image: require('@/img/img_2.png'), rating: 4.5 },
        { id: 3, name: '新疆烧烤', location: '安师大二食堂三楼12号窗口', image: require('@/img/img_3.png'), rating: 4.2 },
        { id: 4, name: '轻卡轻食', location: '安师大二食堂三楼13号窗口', image: require('@/img/img_4.png'), rating: 4.0 }

      ]
    }
  }
}
</script>

<style scoped>

.home-page {
  background: url("./img/img.png") no-repeat center center fixed;
  background-size: cover; /* 图片会被缩放以完全覆盖背景区域，保持其宽高比 */
  height: 100vh; /* 使容器高度等于视口高度 */
  width: 100vw; /* 使容器宽度等于视口宽度 */
  overflow: auto; /* 如果内容超出视口，可以滚动 */
  display: flex; /* 可选，如果需要在其内部进行布局 */
  align-items: center; /* 可选，垂直居中任何flex子项 */
  justify-content: center; /* 可选，水平居中任何flex子项 */
}

.title{
  text-align: center;
}

.container {
  background-color: rgba(255, 255, 255, 0.9);
  min-height: 100vh;
  padding: 20px;
}
.restaurant-list
{
  padding-top: 120px;
}

.restaurant-card {
  position: relative;
  height: 100%;
}

.restaurant-image {
  width: 100%;
  height: 200px; /* 设置图片高度 */
  display: block;
}

.restaurant-info {
  padding: 14px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
}

.restaurant-info h3 {
  margin: 0;
  font-size: 1.2em;
}

.restaurant-info p {
  margin: 5px 0;
  font-size: 0.9em;
  color: #666;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;

}
</style>
